<template>
	<APage>
	<view class="">
		<AForm ref="form" :form="form" rules="rules" >
			<AFormInput label="aa" prop="a" v-model="form.a"/>
			<view class="23">
				<AFormInput label="bb" prop="b" v-model="form.b" required error="不啊大师傅"/>
				<AFormInput label="cc" prop="c" v-model="form.c" />
			</view>
			<AFormInput label="dd" prop="more.d" v-model="form.more.d"/>
			
			<button formType="submit" @click="handleSubmit">提交（校验）</button>
			<button @click="handleReset">重置数据</button>
			<button @click="handleClear">清除校验</button>
		</AForm>
	
		<view class="">
			注意：由于小程序传值限制，AForm组件中rules值传当前页面组件的rules对象名称的字符串
		</view>
	</view>
	</APage>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					a: '',
					b: '',
					c: '',
					more:{
						d:''
					}
				},
				rules: {
					a: {
						required: false,
						message: '请输入活动名称',
						trigger: 'blur'
					},
					c: {
						required: true,
						validator: (rule, value, callback) => {
							if (!value) {
								callback(new Error('不可为空'));
							} else if (value == 'aa') {
								callback(new Error('不可为aa'));
							} else {
								callback()
							}
						},
						trigger: 'blur'
					},
					"more.d":{
						required: false,
						message: '请输入活动名称',
						trigger: 'blur'
					},
				},
			}
		},
		methods: {
			handleSubmit() {
				this.$refs.form.validate(res => {
					console.log(res)
					if (res) { //校验通过
						// console.log(this.form)
					}
				})
				// console.log(this.form)
			},
			handleReset(){
				
			},
			handleClear() {
				this.$refs.form.clearValidate()
			}
		}
	}
</script>

<style lang="scss" scoped>
	h4 {
		padding: 30rpx;
	}

	.list {
		padding: 0 30rpx;

		button {
			height: 70rpx;
			line-height: 70rpx;
			font-size: 35rpx;
			margin-bottom: 20rpx;
		}
	}
</style>